<template>
    <div class="top">
        <el-icon @click="goBack()" :size="20">
            <Close />
        </el-icon>
        <el-text class="mx-1">帮助</el-text>
    </div>

    <div class="main">
        <h2 style="margin-left: 20px;">账号注册</h2>
        <div class="form">
            
            <el-form ref="formRef" style="width: 90%;" :model="userRegisterDTO" label-width="auto" :rules="rules">
                <el-form-item style="width: 100%;" prop="phone" :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }]">
                    <div class="custom-input" style="width: 100%; ">
                        <el-input v-model="userRegisterDTO.phone" placeholder="请输入手机号" />
                    </div>
                </el-form-item>
                <el-form-item style="width: 100%;" prop="name" :rules="[{ required: true, message: '请输入用户名' }]">
                    <div class="custom-input" style="width: 100%; ">
                        <el-input v-model="userRegisterDTO.name" placeholder="请输入用户名" />
                    </div>
                </el-form-item>
                <el-form-item prop="password" :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度不能小于6位' }]">
                    <div class="custom-input" style="width: 100%;">
                        <el-input v-model="userRegisterDTO.password" type="password" placeholder="请输入密码" show-password />
                    </div>
                </el-form-item>
                <el-form-item prop="confirmPassword" :rules="[{ required: true, message: '请确认密码' }, { validator: validatePass, trigger: 'blur' }]">
                    <div class="custom-input" style="width: 100%;">
                        <el-input v-model="userRegisterDTO.confirmPassword" type="password" placeholder="请确认密码" show-password />
                    </div>
                </el-form-item>
            </el-form>
            

            <div class="login-btn">
                <div class="btn">
                    <el-button @click="register(formRef)"
                        type="primary" round 
                        style="width: 90%; height: 50px; border-radius: 100px; font-size: 18px; letter-spacing: 5px;" >
                        注册
                    </el-button>
                </div>
                <div class="btn" @click="goToLogin()">
                    <el-button key="plain" round
                        style="width: 90%; height: 50px; border-radius: 100px; font-size: 18px; letter-spacing: 5px;">
                        返回登录
                    </el-button>
                </div>
            </div>

            <div class="checkbox-group">
                <input type="checkbox" id="agree" v-model="isAgree">
                <label for="agree">我已阅读并同意<a href="#">《万象协议》</a><a href="#">《个人信息保护指引》</a></label>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { Close } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ref } from 'vue'
import api from '@/api';
import { useRouter } from 'vue-router';
import { TipStore } from '@/stores/tipStore';

const router = useRouter();
const TipStoreObject = TipStore();

// 表单数据
const userRegisterDTO = ref({
    phone: '',
    name: '',
    password: '',
    confirmPassword: ''
});

// 是否同意协议
const isAgree = ref(false);

// 表单验证规则
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== userRegisterDTO.value.password) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
};

const rules = ref<FormRules>({
    phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
    ],
    confirmPassword: [
        { required: true, message: '请确认密码', trigger: 'blur' },
        { validator: validatePass, trigger: 'blur' }
    ]
});

const goBack = () => {
    router.back();
}

const goToLogin = () => {
    router.push('/Login');
}

const formRef = ref<FormInstance>();
const register = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    
    formEl.validate((valid) => {
        if (valid) {
            // 检查是否同意协议
            if (!isAgree.value) {
                TipStoreObject.errorTip("请阅读并同意用户协议");
                return;
            }
            let { confirmPassword, ...newObj } = userRegisterDTO.value;

            // 调用注册API
            api.userRegister(newObj).then((res) => {
                if(res.data.code == 1){
                    TipStoreObject.successTip("注册成功，请登录");
                    router.push('/Login');
                }else if (res.data.code == 0){
                    TipStoreObject.errorTip(res.data.msg);
                }
            }).catch((err) => {
                console.log("未知错误:",err);
            })
       
        }
    })
}
</script>

<style scoped>
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    padding: 0px 12px;
}

.mx-1 {
    font-size: 15px;
    margin-right: 10px;
}

.main {
    margin-top: 40px;
    height: auto;
}

.form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    flex-direction: column;
}
:deep(.el-form-item){
    margin-bottom: 35px;
}
.custom-input{
    display: flex;
}
.custom-input :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: none !important;
    border-radius: 0;
    padding-left: 0;
    border-bottom: 1px solid #dcdfe6;
}
.custom-input :deep(.el-input__wrapper.is-focus) {
    border-bottom-color: #409eff;
}

.custom-input :deep(.el-input__inner) {
    color: #333;
    font-size: 16px;
}

.custom-input :deep(.el-input__inner::placeholder) {
    color: #999;
    font-weight: 300;
    transition: opacity 0.2s;
}

.custom-input :deep(.el-input__inner:focus::placeholder) {
    opacity: 0;
}

.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    flex-direction: column;
}

.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.checkbox-group {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #646464;
    margin-top: 20px;
}

.checkbox-group input {
    margin-right: 8px;
}

.checkbox-group a {
    color: #0084ff;
    text-decoration: none;
}
</style>